<template>
    <div>
        购物车
        <el-table :data="list" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="155"> </el-table-column>

            <el-table-column prop="productName" label="商品名称" width="220">
            </el-table-column>
            <el-table-column label="" width="320">
                <template slot-scope="scope">
                    <img
                        :src="
                            'http://47.115.85.237:3000/' + scope.row.productImg
                        "
                        alt=""
                        width="50px"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" width="320">
            </el-table-column>
            <el-table-column label="数量" width="220">
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.num"
                        :min="1"
                        :max="100"
                        :label="1"
                    ></el-input-number
                ></template>
            </el-table-column>

            <el-table-column prop="name" label="小计" width="320">
                <template slot-scope="scope">
                    {{ scope.row.num * scope.row.price }}
                </template>
            </el-table-column>
           
            <el-table-column label="操作" width="320">
                <template slot-scope="scope">
                    <span
                        class="el-icon-circle-close"
                        size="30px"
                        @click="del(scope.row)"
                    ></span>
                </template>
            </el-table-column>
        </el-table>
        总的价钱是：{{zong}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
        };
    },
    computed: {
        zong() {
            var num = 0;
            this.list.forEach((item) => {
                num += item.num * item.price;
            });
            return num;
        },
    },
    methods: {
        del(obj) {
            this.$axios
                .post("/api/user/shoppingCart/updateShoppingCart", {
                    user_id: 1404,
                    product_id: obj.productID,
                    num: obj.num,
                })
                .then((res) => {
                    console.log(res);
                });
            this.$axios
                .post("/api/user/shoppingCart/deleteShoppingCart", {
                    user_id: 1404,
                    product_id: obj.productID,
                })
                .then((res) => {
                    console.log(res);
                });
        },
    },
    mounted() {
        this.$axios
            .post("/api/user/shoppingCart/getShoppingCart", { user_id: 1404 })
            .then((res) => {
                this.list = res.data.shoppingCartData;
                // console.log(this.list);
            });
    },
};
</script>
